<template>
  <div class="login">
    <div class="login-bg">
      <img src="../../assets/img/login-bg.png" alt="">
    </div>
    <div class="login-content">
      <ul class="content-ul">
        <li class="content-logo-li">
          <img src="../../assets/img/logo.svg"alt="">
        </li>
        <li class="content-title-li">
          <span>开封人社大数据监管共享分析平台</span>
        </li>
        <li class="content-input-li">
          <div class="input-content">
            <img src="../../assets/img/login-person-icon.png" alt="">
            <input :class="{'fail-input':showUserNameFail} "v-model="userName" maxlength="20" type="text"
                   placeholder="请输入用户名称">
          </div>
          <div class="input-tip">
            <p v-show="showUserNameFail">{{ userNameFailMsg }}</p>
          </div>
        </li>
        <li class="content-input-li">
          <div class="input-content">
            <img src="../../assets/img/login-password-icon.png" alt="">
            <input :class="showPasswordFail ? 'fail-input' : '' " v-model="userPassword" maxlength="16" type="password"
                   placeholder="请输入登录密码" v-on:keyup.13="loginSubmit">
          </div>
          <div class="input-tip">
            <p v-show="showPasswordFail">{{ passwordFailMsg }}</p>
          </div>

        </li>
        <li class="content-submit-li">
          <span @click="loginSubmit">登录</span>
        </li>
      </ul>
    </div>
    <div class="footer">
      <img src="../../assets/img/login-footer.png" alt="">
    </div>

  </div>
</template>
<script>

  import { loginRequest } from "../../api/authority.js";

  import md5 from "js-md5";

  export default {
    data() {
      return {
        userName: "",
        userPassword: "",
        userNameFailMsg: "",
        passwordFailMsg: "",
        showUserNameFail: false,
        showPasswordFail: false,
      };
    },

    watch: {
      userName(newVal, oldVal) {
        this.showUserNameFail = false;
        let patt = /^[0-9a-zA-Z]{0,20}$/;
        if (!patt.test(newVal)) {
          this.userName = oldVal;
        }
      },
      userPassword() {
        this.showPasswordFail = false;
      }
    },
    methods: {
      loginSubmit() {
        this.checkInput();
        if(this.showUserNameFail){
          return;
        }
        if(this.showPasswordFail){
          return;
        }
        //  发送登录
        loginRequest({ loginName: this.userName, password: md5(this.userPassword) })
          .then((resParams) => {
            if (resParams.code === 0) {
              let sessionUser = resParams.data.sessionUser;
              // 存储登录后的数据
              sessionStorage.setItem("sessionUser", JSON.stringify(sessionUser));
              // this.$router.push('/');
              console.log(sessionUser.menuMap)
              if (sessionUser.menuMap.menu) {
                window.location.href = "#/big-screen";
                return
                for (let i = 0; i < sessionUser.menuMap.menu.length; i++) {
                  if (sessionUser.menuMap.menu[i].sysMenu.url) {

                    window.location.href =  sessionUser.menuMap.menu[i].sysMenu.url;
                    // this.$router.push('/')
                    // window.location.href='http://localhost:8088/#/index'
                    // break;
                    break;
                  }
                  if (i == sessionUser.menuMap.menu.length - 1) {
                    window.location.href = "#/welcome";
                  }
                }
              } else {
                window.location.href = "#/welcome";
              }

              this.showToast("登录成功",resParams.code);
             /* if (!sessionUser.roleStrlist.length) {
                // 您的账号还未授权
                this.showToast("您的账号还未授权",resParams.code);
              } else if (sessionUser.perminsStrlist.length) {
                // 您的权限被禁用
                this.showToast("您的权限被禁用",resParams.code);
              }*/
            } else {
              // 5 账号已被禁用 6 该账号机构被禁用
              if (resParams.code === 5 || resParams.code === 6) {
                this.showToast(resParams.message,resParams.code);
                return;
              }

              this.showUserNameFail = this.showPasswordFail = true;
              this.userNameFailMsg = "";
              this.passwordFailMsg = resParams.message;
            }
          });
      },
      checkInput() {
        this.showUserNameFail = false;
        this.showPasswordFail = false;

        if (!this.userName.length) {
          this.showUserNameFail = true;
          this.userNameFailMsg = "用户名称不能为空";
        }
        if (!this.userPassword.length) {
          this.showPasswordFail = true;
          this.passwordFailMsg = "登录密码不能为空";
        }
      }
      ,
      showToast(message,code) {
        let duration = 2000;
        if(code==0){
          duration = 500;
        }
        this.$message({
          message: message,
          center: true,
          type: "success",
          duration: duration
        });
      }
    }
  };
</script>
<style scoped>
  .login {
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .login-bg {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

  .login-bg > img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
  }

  .login-content {
    width: 460px;
    height: 460px;
    float: left;
    border: 1px solid #4e5572;
    border-top: 5px solid #e7224a;
    position: absolute;
    z-index: 2;
    border-radius: 5px;
    background-color: #1c2340;
  }

  .login-content .content-ul {
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .login-content .content-ul .content-logo-li {
    margin-top: 50px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .login-content .content-ul .content-logo-li > img {
    /*width: 39px;*/
    height: 70px;
  }

  .login-content .content-ul .content-title-li {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 44px;
  }

  .login-content .content-ul .content-title-li > span {
    font-size: 26px;
    color: #fff;
  }

  .login-content .content-ul .content-input-li {
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .login-content .content-ul .content-input-li .input-content {
    display: flex;
    align-items: center;
  }

  .login-content .content-ul .content-input-li .input-content > img {
    width: 24px;
    height: 26px;
    position: absolute;
    z-index: 2;
    margin-left: 18px;
    margin-right: 13px;
  }

  .login-content .content-ul .content-input-li .input-content > input {
    width: 285px;
    height: 40px;
    color: #fff;
    font-size: 14px;
    padding-left: 55px;
    border: 1px solid #313d4f;
    background-color: #1a2940;
    border-radius: 2px;
  }

  .login-content .content-ul .content-input-li .input-content .fail-input {
    border: 1px solid #e7224a;
    animation: myfirst 1.5s;
  }

  /* 错误边框变红动画 */
  @keyframes myfirst {
    0% {
      border: 1px solid #e7224a;
    }
    25% {
      border: 1px solid #313d4f;
    }
    50% {
      border: 1px solid #e7224a;
    }
    75% {
      border: 1px solid #313d4f;
    }
    100% {
      border: 1px solid #e7224a;
    }
  }

  .login-content .content-ul .content-input-li .input-tip {
    line-height: 30px;
    height: 30px;
  }

  .login-content .content-ul .content-input-li .input-tip > p {
    font-size: 12px;
    color: #e7224a;
  }

  .login-content .content-ul .content-submit-li > span {
    width: 80px;
    height: 40px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 40px;
    display: inline-block;
    background-color: #2b9ff6;
    border-radius: 4px;
    cursor: pointer;
  }

  .login-content .content-ul .content-submit-li > span:hover {
    background-color: #0a82d8;
  }

  .footer {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
  }

  .footer > img {
    margin: 0 auto;
    display: block;
  }
</style>
